// 物料管理
import material from './material.module.scss'
import { Input, Select, Button, Space, Table, Modal, Form, Row, Col, Radio, DatePicker, DatePickerProps, ConfigProvider, Popconfirm, message } from 'antd';
import { SearchOutlined, SyncOutlined, DownloadOutlined, UploadOutlined, CloudDownloadOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/lib/table';
import React, { useEffect } from 'react';
import { useState } from 'react'
import moment from 'moment';
import 'moment/locale/zh-cn';
import { getDate } from './getDate'
import axios from 'axios';
const MaterialManagement = () => {
  // 获取维护人下拉选择框
  //  获取用户
  const [username, setUsername] = useState([])
  const userselect = () => {
    getDate('/examine/findUser').then(res => {
      console.log('获取用户数据');
      console.log(res);
      let cc: any = []
      cc = res.data.data
      cc = cc.map((item: { userId: number; userName: string; }) => {
        return <Option key={item.userId} value={item.userId}>{item.userName}</Option>
      })
      setUsername(cc)
    }).catch(error => console.log(error)
    )
  }
  // 获取表单数据
  const [data, setData] = useState([])
  useEffect(() => {
    userselect()
    getDate('/material/selectMaterials').then(res => {
      console.log(res.data.data.listMaterials);
      setData(res.data.data.listMaterials)
    }).catch(error => console.log(error)
    )

  }, [])
  const [searchdata] = Form.useForm()
  // 设置修改表单的数据
  const [addForm] = Form.useForm()
  const [editForm] = Form.useForm();
  // select选择框
  const { Option } = Select;
  const [terialtype, setTerialtype] = useState<string>()
  const [autodis, setAutodis] = useState<string>()
  const materialtype = (value: { value: string; label: React.ReactNode }) => {
    setTerialtype(value.value)
  };
  const autodispatch = (value: { value: string; label: React.ReactNode }) => {
    setAutodis(value.value)
  };
  const [terialedittype, setTerialedittype] = useState<string>()
  const materialedittype = (value: { value: string; label: React.ReactNode }) => {
    setTerialedittype(value.value)
  };
  // 删除确认按钮
  const confirm = (id: number) => {
    console.log(id);
    axios({
      url: '/material/deleteMaterials',
      params: { materialsId: id }
    }).then(res => {
      if (res.status === 200) {
        getDate('/material/selectMaterials').then(res => {
          setData(res.data.data.listMaterials)
          message.success('删除成功');
        }).catch(error => console.log(error)
        )
      }
    }).catch(error => console.log(error)
    )
  };
  // 查询
  const onFinish = (values: any) => {
    console.log('Success:', values);
    axios({
      url: "/material/selectMaterials",
      params: { ...values }
    }).then(res => {
      if (res.status === 200) {
        setData(res.data.data.listMaterials)
        message.success('查询成功');
      }
      console.log('查询成功');
    }).catch(error => console.log(error)
    )
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  // 物料编码
  const [group, setGroup] = useState<string>()
  // 检验项目
  const [groupid, setGroupid] = useState<string>()
  const setgroup = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setGroup(e.target.value)
  }
  const setgroupid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setGroupid(e.target.value)
  }
  const searchval = () => {
    console.log(group, groupid, terialtype, autodis);
  }

  // 重置
  const resoveval = () => {
    searchdata.resetFields()
    getDate('/material/selectMaterials').then(res => {
      setData(res.data.data.listMaterials)
      message.success('重置成功');
    }).catch(error => console.log(error)
    )
  }
  // 表格
  interface DataType {
    key: string;
    materialsId: number;//序号
    itemGroup: string;//物料组
    materialCode: number;//物料编码
    materialName: string;//物料名称
    specificationModel: string;//规格型号
    drawingNo: string;//图号
    Company: string;//单位
    taghtenedInspectionCycle: number;//加严检验周期
    whetherTheInspectionIsTightened: string;//是否加强检验
    standardManHours: number;//标准工时
    automaticDispatch: string;//自动派单
    materialCategory: string;//物料类别
    typeTestLast: string;//上次型式时间
    typeInsterval: number;//型式间隔周期
    typeTestNext: string;//下次型式时间
    lastOperationTime: string;//最新操作时间
    Maintainer: string;//维护人

  }

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'materialsId',
      fixed: 'left',
    },
    {
      title: '物料类型',
      dataIndex: 'materialStyleName',
    },
    {
      title: '物料编码',
      dataIndex: 'materialsCode',
      key: 'materialCode',
    },
    {
      title: '物料名称',
      dataIndex: 'materialsName',
    }
    ,
    {
      title: '规格型号',
      key: 'specificationModel',
      dataIndex: 'materialsStyle',
    },
    {
      title: '图号',
      dataIndex: 'materialsDrawing',
    },
    {
      title: '单位',
      dataIndex: 'materialsUnit',
    },
    {
      title: '加严检验周期',
      dataIndex: 'strictPeriod',
    },
    {
      title: '是否加强检验',
      dataIndex: 'isStrict',
    },
    {
      title: '标准工时',
      dataIndex: 'produceTime',
    },
    {
      title: '自动派单',
      dataIndex: 'autoLeaflet',
    },
    {
      title: '物料组名称',
      dataIndex: 'materialName',
    },
    {
      title: '上次型式时间',
      dataIndex: 'typeTestLast',
    },
    {
      title: '型式间隔周期',
      dataIndex: 'typeTestPeriod',
    },
    {
      title: '下次型式时间',
      dataIndex: 'typeTestNext',
    },
    {
      title: '最新操作时间',
      dataIndex: 'typeTestNew',
    },
    {
      title: '维护人',
      dataIndex: 'userName',
    },
    {
      title: '操作',
      key: 'Operation',
      fixed: 'right',
      width: 120,
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { editsearch(record) }}>编辑</a>
          <Popconfirm
            title="确认删除嘛?"
            onConfirm={() => { confirm(record.materialsId) }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 模态框
  const [iseditModalVisible, seteditIsModalVisible] = useState(false);
  const [isaddModalVisible, setaddIsModalVisible] = useState(false);
  // 新增
  const addtable = () => {
    addForm.resetFields()
    setaddIsModalVisible(true)
  }
  const [addlasttime, setAddlasttime] = useState<string>()
  const [addnexttime, setAddnexttime] = useState<string>()
  const handleaddOk = () => {
    setaddIsModalVisible(false);
    console.log(addForm.getFieldsValue());
    console.log(addlasttime);
    console.log(addnexttime);
    console.log(nowtime);

    axios({
      url: '/material/addMaterials',
      method: 'post',
      data: { ...addForm.getFieldsValue(), typeTestLast: addlasttime, typeTestNext: addnexttime, typeTestNew: nowtime }
    }).then(res => {
      console.log(res);
    }).catch(error => console.log(error)
    )
  };
  const handleaddCancel = () => {
    setaddIsModalVisible(false);
  };
  // 修改
  // 设置默认时间
  const [lasttime, setLasttime] = useState<string>()
  const [nexttime, setNexttime] = useState<string>()
  const editsearch = (record: DataType) => {
    seteditIsModalVisible(true);
    editForm.setFieldsValue(record)
    setLasttime(record.typeTestLast)
    setNexttime(record.typeTestNext)
  }
  const handleeditOk = () => {
    seteditIsModalVisible(false);
    console.log(editForm.getFieldsValue());
    axios({
      url: '/material/updateMaterials',
      method: 'post',
      data: { ...editForm.getFieldsValue(), typeTestLast: lasttime, typeTestNext: nexttime, typeTestNew: nowtime }
    }).then(res => {
      console.log(res);
      if (res.status === 200) {
        getDate('/material/selectMaterials').then(res => {
          console.log(res.data.data.listMaterials);
          setData(res.data.data.listMaterials)
        }).catch(error => console.log(error)
        )
      }
    }).catch(error => {
      console.log(error);
    })

  };
  const handleeditCancel = () => {
    seteditIsModalVisible(false);
  };
  // 上次次型式时间
  const onlasttimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };
  // 下次型式时间
  const onnexttimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };
  // 最新操作时间
  const [nowtime, setNowtime] = useState<string>()
  const onnowtimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setAddlasttime(dateString)
  };
  // 添加时间
  const onaddlasttimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setNowtime(dateString)
  };
  const onaddnexttimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setAddnexttime(dateString)
  };
  return <div className={material.box}>
    {/* 查询 */}
    <div>
      <Form
        name="basic"
        form={searchdata}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Row>
          <Col>
            <Form.Item
              label="物料编码"
              name="materialsCode"
            >
              <Input />
            </Form.Item>
          </Col>
          <Col>
            <Form.Item
              label="物料类型"
              name="materialStyleName"
              style={{ marginRight: 20 }}
            >
              <Input style={{ marginRight: 20 }} />
            </Form.Item>
          </Col>
          <Col>
            <Form.Item
              label="物料组"
              name="materialName"
              style={{ marginRight: 20 }}
            >
              <Input style={{width:150}}></Input>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item
              label="自动派单"
              name="autoLeaflet"
            >
              <Select style={{ width: 150 }}>
                <Option value={1}>是</Option>
                <Option value={0}>否</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button type="primary" ghost icon={<SearchOutlined />} htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Col>
          <Col>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Button style={{ marginLeft: 20, color: '#ffc069', border: '1px solid #ffc069' }} icon={<SyncOutlined style={{ color: '#ffc069' }} />} onClick={() => { resoveval() }} >
                重置
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
    {/* 新增按钮 */}
    <div className={material.add}>
      <Button onClick={() => { addtable() }} className={material.btl} type="primary" size={'small'}>
        +新增
      </Button>
      <Button className={material.btl} icon={<DownloadOutlined />} type="primary" size={'small'}>
        导入
      </Button>
      <Button className={material.btl} icon={<UploadOutlined />} type="primary" size={'small'}>
        导出
      </Button>
      <Button icon={<CloudDownloadOutlined />} type="primary" size={'small'}>
        模板下载
      </Button>
    </div>
    <Table rowKey={(record) => { return record.materialsId }} pagination={{ showQuickJumper: true, defaultPageSize: 2, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} scroll={{ x: 2100 }} columns={columns} dataSource={data} />
    {/* 修改模态框 */}
    <div>
      <Modal width='800px' title="物料修改" visible={iseditModalVisible} onOk={handleeditOk} onCancel={handleeditCancel}>
        <Form
          form={editForm}
          name="basic"
          labelCol={{
            span: 10,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
          initialValues={{ value: '请选择类型', label: '请选择类型' }}
        >
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="物料类型"
                name={"materialStyleName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="物料编号："
                name={"materialsCode"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="物料组名称："
                name={"materialsName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="规格型号："
                name={"materialsStyle"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="图号："
                name={"materialsDrawing"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
            <Col span='14'>
              <Form.Item
                label="物料组id"
                name={"materialId"}
                hasFeedback
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select
                  style={{ width: 150 }}
                  className={material.ipt}
                >
                  <Option value={1}>常规</Option>
                  <Option value={2}>特殊</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="单位："
                name={"materialsUnit"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="加严检验周期："
                name={"strictPeriod"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="是否加严检验"
                name={"isStrict"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="标准工时"
                name={"produceTime"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="自动派单："
                name={"autoLeaflet"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="上次型式时间："
              >
                <DatePicker onChange={onlasttimeChange} defaultValue={moment(lasttime, 'YYYY-MM-DD')} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="型式间隔周期："
                name={"typeTestPeriod"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="下次型式时间："
              // name="nextTypeTime"
              >
                <DatePicker defaultValue={moment(nexttime, 'YYYY-MM-DD')} onChange={onnexttimeChange} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="维护人"
                name={"userId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={userselect}>
                  {username}
                </Select>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="最新操作时间："
              // name="nextTypeTime"
              >
                <DatePicker onChange={onnowtimeChange} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="材料id"
                name={"materialsId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="物料类型id"
                name="materialStyleId"
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
    {/* 添加模态框 */}
    <div>
      <Modal width='800px' title="物料新增" visible={isaddModalVisible} onOk={handleaddOk} onCancel={handleaddCancel}>
        <Form
          form={addForm}
          name="basic"
          labelCol={{
            span: 10,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
          initialValues={{ value: '请选择类型', label: '请选择类型' }}
        >
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="物料类型"
                name={"materialStyleName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="物料编号："
                name={"materialsCode"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="物料组名称："
                name={"materialsName"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="规格型号："
                name={"materialsStyle"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="图号："
                name={"materialsDrawing"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
            <Col span='14'>
              <Form.Item
                label="物料组id"
                name={"materialId"}
                hasFeedback
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select
                  style={{ width: 150 }}
                  className={material.ipt}
                >
                  <Option value={1}>常规</Option>
                  <Option value={2}>特殊</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="单位："
                name={"materialsUnit"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="加严检验周期："
                name={"strictPeriod"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="是否加严检验"
                name={"isStrict"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="标准工时"
                name={"produceTime"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="自动派单："
                name={"autoLeaflet"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="上次型式时间："
              >
                <DatePicker onChange={onaddlasttimeChange} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="型式间隔周期："
                name={"typeTestPeriod"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="下次型式时间："
              // name="nextTypeTime"
              >
                <DatePicker onChange={onaddnexttimeChange} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="维护人"
                name={"userId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Select style={{ width: 150 }} onFocus={userselect}>
                  {username}
                </Select>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="最新操作时间："
              // name="nextTypeTime"
              >
                <DatePicker onChange={onnowtimeChange} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="材料id"
                name={"materialsId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="物料类型id"
                name="materialStyleId"
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </div>

  </div>
}

export default MaterialManagement